<template>
	<view>
		<view class="head">
			<view class="money-text">待结算(元)</view>
			<view class="money">100.00</view>
		</view>
		<view class="box">
			<view class="title">提现记录</view>
			<view class="each" v-for="i in 20">
				<view class="name z-flex-x-s-b">
					<view class="">2024.04.07自助提现收入</view>
					<view class="">转账完成</view>
				</view>
				<view class="num z-padding-b-8">+142.60</view>
				<view class="minor">总结扣费：-52.79 <text>查看明细</text> </view>
				<view class="minor">打款时间：2024.04.08 08:00:00</view>
			</view>
		</view>
		
		
		<u-popup closeable :round="10" :show="detailShow" mode="center" @close="close" @open="open">
			<view class="popup-box">
				<view class="pop-title">扣费明细</view>
				<view style="height: 48rpx; width: 1rpx"></view>
		
				<view class="minor">2024.04.07自助总收入</view>
				<view class="p-num">187.50</view>
				<view class="hine">团购部分的收入不走本系统，在美团、抖音商户端后台查看</view>
				<u-line length="536rpx" style="margin: auto; margin-top: 32rpx"></u-line>
				<view class="order-each">
					<view class="minor-text">微信平台提现手续费</view>
					<view class="single-range"><text>-￥0.00</text></view>
				</view>
				<view class="order-each">
					<view class="minor-text">自助提现收入扣点</view>
					<view class="single-range"><text>-￥0.00</text></view>
				</view>
				<view class="order-each">
					<view class="minor-text">团购核销服务费</view>
					<view class="single-range"><text>-￥0.00</text></view>
				</view>
				<view class="order-each">
					<view class="minor-text">线下开台服务费</view>
					<view class="single-range"><text>-￥0.00</text></view>
				</view>
				<view class="order-each">
					<view class="minor-text">畅打卡发放扣点服务费</view>
					<view class="single-range"><text>-￥0.00</text></view>
				</view>
				<view class="money-r z-margin-t-32">
					实际提现金额
					<text class="z-padding-l-8">￥0.00</text>
				</view>
				<view class="money-r" style="color: #4BC264;margin-top: 11rpx;">
					(已扣除其他渠道收入部分的扣点服务费)
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailShow:true
			}
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.detailShow = false;
			},
		}
	}
</script>

<style lang="scss">
	.head {
		width: 750rpx;
		height: 282rpx;
		background: linear-gradient(to bottom, #E4F6F1,#E5F4F5, #F0F6F7);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		text-align: center;
		.money-text {
			font-weight: 500;
			font-size: 24rpx;
			color: #A3ABB9;
			padding-top: 62rpx;
		}
		.money {
			font-weight: bold;
			font-size: 64rpx;
			color: #203460;
			margin-top: 8rpx;
		}
	}
	.box {
		width: 750rpx;
		height: calc(100vh - 300rpx);
		overflow-x: hidden;
		overflow-y: scroll;
		background: #FFFFFF;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		position: relative;
		top: -50rpx;
		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #1C274C;
			padding: 32rpx 32rpx 0 32rpx;
		}
		
		.each {
			padding: 32rpx;
			width: 622rpx;
			background: #F7F8FA;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: auto;
			margin-top: 24rpx;
			.name {
				font-weight: 500;
				font-size: 24rpx;
				color: #1C274C;
				
			}
			.num {
				font-weight: bold;
				font-size: 30rpx;
				color: #FF9600;
				margin-top: 10rpx;
			}
			.minor {
				font-weight: 500;
				font-size: 22rpx;
				color: #A4A9B7;
				margin-top: 8rpx;
				text {
					font-weight: 500;
					font-size: 22rpx;
					color: #4BC264;
					padding-left: 16rpx;
				}
			}
		}
	}
	
	
	
	.popup-box {
		width: 536rpx;
		background: #ffffff;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		padding: 40rpx 32rpx;
		.pop-title {
			text-align: center;
			font-weight: 800;
			font-size: 36rpx;
			color: #1c274c;
		}
		.minor {
			font-weight: 500;
			font-size: 24rpx;
			color: #A4A9B7;
		}
		.p-num {
			font-weight: 500;
			font-size: 48rpx;
			color: #1C274C;
			margin-top: 16rpx;
		}
		.hine {
			font-weight: 500;
			font-size: 20rpx;
			color: #FF7B18;
			margin-top: 16rpx;
		}
		
		.order-each {
			display: flex;
			justify-content: space-between;
			.single-range {
				padding-top: 32rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #1c274c;
				text {
					color: #4bc264;
				}
			}
			.minor-text {
				font-weight: 500;
				font-size: 24rpx;
				color: #a4a9b7;
				padding-top: 32rpx;
			}
		}
		.money-r {
			font-weight: 500;
			font-size: 24rpx;
			color: #a4a9b7;
			text-align: right;
			text {
				font-weight: 500;
				font-size: 32rpx;
				color: #4bc264;
			}
		}
	}
</style>
